<!DOCTYPE html>
<html>
<head>
	<title>测试商城</title>
	<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
<link rel="stylesheet" type="text/css" href="lib/weui.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery-weui.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header class="weui-header">
	<div class="weui-search-bar" id="searchBar">
  <form class="weui-search-bar__form">
    <div class="weui-search-bar__box">
      <i class="weui-icon-search"></i>
      <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
      <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
    </div>
    <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
      <i class="weui-icon-search"></i>
      <span>搜索</span>
    </label>
  </form>
  <a  href="javascript:" id="search_bar_1" class="weui-search-bar__cancel-btn">搜索</a>
</div>
</header>


<div class='weui-content'>
<!-- 幻灯片 -->
<!--  data-space-between='10' data-pagination='.swiper-pagination' data-autoplay="1000" -->
<div class="swiper-container" id="index_swiper">
  <div class="swiper-wrapper">
<div class="swiper-slide"><a href="pro_info.html"><img src="images/ban1.jpg" /></a></div>
  </div>
</div>

<!--图标分类-->
  <div class="weui-flex wy-iconlist-box">
    <div class="weui-flex__item"><a href="html/zhifu.html" class="wy-links-iconlist"><div class="img"><img src="images/icon-link1.png"></div><p>精选推荐</p></a></div>
    <div class="weui-flex__item"><a href="pro_list.html" class="wy-links-iconlist"><div class="img"><img src="images/icon-link2.png"></div><p>酒水专场</p></a></div>
    <div class="weui-flex__item"><a href="all_orders.html" class="wy-links-iconlist"><div class="img"><img src="images/icon-link3.png"></div><p>订单管理</p></a></div>
    <div class="weui-flex__item"><a href="Settled_in.html" class="wy-links-iconlist"><div class="img"><img src="images/icon-link4.png"></div><p>商家入驻</p></a></div>
  </div>

</div>
<script type="text/javascript" src="lib/jquery-2.1.4.js"></script>
<script type="text/javascript" src="lib/fastclick.js"></script>
<script type="text/javascript" src="js/jquery-weui.js"></script>
<script type="text/javascript" src="js/swiper.js" charset='utf-8'></script>
<script type="text/javascript">
	$(function(){
		FastClick.attach(document.body);
	});
</script>
<script type="text/javascript">
var data =["images/ban1.jpg"];
//头部控件
var header_tool = {
  search_bar: $('#search_bar_1'),
  searchInput: $('#searchInput')
}
//内容的控件
var content_tool = {
  swiper :$('#index_swiper')
}
//头部控件方法
var header_tool_Action ={
  search:function () {
    $.toast(header_tool.searchInput.val()); 
  },
  }
 // observer:true,
 //    observeParents:true
var init_swiper =function () {
  content_tool.swiper.swiper({
    direction: "horizontal",/*横向滑动*/    
    loop:true,/*形成环路（即：可以从最后一张图跳转到第一张图*/ 
    autoplay: 2000,/*切换时间*/
    observer:true,
    observeParents:true
  });
}

//页面加载完后运行
$(document).ready(function(){

  init_swiper();
  header_tool.search_bar.on('click', function(event) {
    event.preventDefault();
    header_tool_Action.search();
  });
 
});
</script>

</body>
</html>